<template>
	<!-- 员工详情 -->
  <div class="stu">
	 <el-dialog v-loading="loading"  :title="num==1?'编辑务工信息':'新增务工信息'" :visible.sync="dialogVisible" width="42%" :before-close="handleClose" top='1vh' :close-on-click-modal='false'>
	   <!-- <p class="pbox" style="text-align: center;width:100%;font-size:30px;height:40px;">员工信息详情</p> -->

	    <div style="width:100%;padding-bottom:20px;">
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:9.7%;"><a style="color:red;">*</a>选择地区</p>
					<el-select style='width:42.3%;' @change='activess.group_id="";activess.pop_id=""' v-model="activess.village_id" clearable filterable placeholder="选择行政村">
					  <el-option v-for='i in $store.state.cunid' :label="i.label" :value="i.value"></el-option>
					</el-select>
					<el-select style='width:42.2%;' v-model="activess.group_id" @change='activess.pop_id="";git_ren()' clearable filterable placeholder="选择村组">
					  <el-option v-for='i in activeput(gitcode(activess.village_id,$store.state.cunid),$store.state.cunzuid)' :label="i.label" :value="i.value"></el-option>
					</el-select>
			</div>
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:9.7%;"><a style="color:red;">*</a>人员</p>
					<el-select style="width:85.1%;border:none;" class="pboxc1" v-model="activess.pop_id" clearable filterable placeholder="请选择">
					  <el-option v-for='item in renbox' :key='item.pop_id' :label="item.name" :value="item.pop_id"></el-option>
					</el-select>
			</div>
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:9.7%;"><a style="color:red;">*</a>务工状况</p>
					<el-select style="width:85.1%;border:none;" class="pboxc1" v-model="activess.work_id" clearable filterable placeholder="请选择">
					  <el-option v-for='item in $store.state.activebox' :label="item.label" :value="item.value"></el-option>
					</el-select>
			</div>
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:9.7%;"><a style="color:red;">*</a>务工地址</p>
					<el-input style='width:85.1%;' placeholder="请输入" v-model="activess.work_address" clearable></el-input>
			</div>
			<div style="margin-top:10px;" class="tabbox">
			   <div style="float:left;margin-top:0px;width:50%;float:left;" class="tabbox">
			   		<p>经度</p>
			   		<el-input style='width:70%;' placeholder="请输入" v-model="activess.work_lon" clearable></el-input>
			   </div>
			   <div style="float:left;margin-top:0px;width:50%;float:right;" class="tabbox">
			   		<p>纬度</p>
			   		<el-input style='width:70%;' placeholder="请输入" v-model="activess.work_lat" clearable></el-input>
			   </div>
			</div>
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:9.7%;"><a style="color:red;">*</a>单位属性</p>
					<el-select style="width:85.1%;border:none;" class="pboxc1" v-model="activess.unit_id" clearable filterable placeholder="请选择">
					  <el-option v-for='item in $store.state.unit_id' :label="item.label" :value="item.value"></el-option>
					</el-select>
			</div>
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:9.7%;">单位名称</p>
					<el-input style='width:85.1%;' placeholder="请输入" v-model="activess.unit_name" clearable></el-input>
			</div>
			<div style="margin-top:10px;" class="tabbox">
			   <div style="float:left;margin-top:0px;width:50%;float:left;" class="tabbox">
			   		<p>务工工资</p>
			   		<el-input style='width:70%;' placeholder="请输入" v-model="activess.work_wage" clearable></el-input>
			   </div>
			   <div style="float:left;margin-top:0px;width:50%;float:right;" class="tabbox">
			   		<p>职务/工种</p>
			   		<el-input style='width:70%;' placeholder="请输入" v-model="activess.work_type" clearable></el-input>
			   </div>
			</div>
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:9.7%;">务工年度</p>
					<el-date-picker style='width:85.1%' v-model="activess.work_year" placeholder="请选择" value-format='yyyy' type="year" clearable></el-date-picker>
			</div>
			
			<div style="margin-top:10px;" class="tabbox">
			   <div style="float:left;margin-top:0px;width:50%;float:left;" class="tabbox">
			   		<p>是否外出</p>
			   		<el-select style="width:70%;border:none;" class="pboxc1" v-model="activess.is_out" clearable filterable placeholder="请选择">
			   		  <el-option :label="'是'" :value="'1'"></el-option><el-option :label="'否'" :value="'0'"></el-option>
			   		</el-select>
			   </div>
			   <div style="float:left;margin-top:0px;width:50%;float:right;" class="tabbox">
			   		<p>外出时间</p>
			   		<el-date-picker style='width:70%' v-model="activess.out_time" placeholder="请选择" class='tabboxright' value-format='yyyy-MM-dd' type="date" clearable></el-date-picker>
			   </div>
			</div>
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:9.7%;">是否有意愿</p>
					<el-select style="width:85.1%;border:none;" class="pboxc1" v-model="activess.is_stay_county" clearable filterable placeholder="请选择">
					  <el-option :label="'是'" :value="'1'"></el-option><el-option :label="'否'" :value="'0'"></el-option>
					</el-select>
			</div>
			
			<div style="margin-top:10px;height:50px;line-height:50px;" class="tabbox">
					<p style="width:13%;font-size:18px;font-weight:600;float:left;"><a style="color:red;"></a>务工经历</p>
					 <el-button type="primary" @click='create' style='float:right;margin:10px;margin-top:7px;' icon="el-icon-plus">增加</el-button>
			</div>
		
		<div style="width:100%;height:300px;margin-bottom:25px;" v-for="(i,index) in activess.work_experience">
			<div style="margin-top:10px;" class="tabbox">
				<el-button @click='delect(index)' type="danger" style='float:right;margin-right:10px;' icon="el-icon-delete">删除</el-button>
			</div>
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:9.7%;">公司名称</p>
					<el-input style="width:85.1%;" placeholder="请输入内容" v-model="i.unit_name"></el-input>
			</div>
			<div style="margin-top:10px;" class="tabbox">
			   <div style="float:left;margin-top:0px;width:50%;float:left;" class="tabbox">
			   		<p>起始时间</p>
			   		<el-date-picker style='width:70%' v-model="i.work_start_time" placeholder="请选择" class='tabboxright' value-format='yyyy-MM-dd' type="date" clearable></el-date-picker>
			   </div>
			   <div style="float:left;margin-top:0px;width:50%;float:right;" class="tabbox">
			   		<p>离职时间</p>
			   		<el-date-picker style='width:70%' v-model="i.work_end_time" placeholder="请选择" class='tabboxright' value-format='yyyy-MM-dd' type="date" clearable></el-date-picker>
			   </div>
			</div>
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:9.7%;">岗位状态</p>
					<el-select style="width:85.1%;" v-model="i.position_status" clearable filterable placeholder="请选择">
					   <el-option :label="'在职'" :value="'1'"></el-option>
					   <el-option :label="'离职'" :value="'0'"></el-option>
					</el-select>
			</div>
			<div style="margin-top:10px;height:100px;" class="tabbox">
					<p style="width:9.7%;">备注</p>
					<el-input style="width:85.1%;" type="textarea" :rows="4" placeholder="请输入内容" v-model="i.remark"></el-input>
			</div>
		</div>
			
			
		</div>	
		<div style="width:100%;height:40px;margin-top:20px;">
	      <div style="width:170px;margin: 0 auto;">
	        <el-button type="danger" @click="handleClose">取 消</el-button>
	        <el-button type="primary" style='float:right;' @click="git_acts">确 定</el-button>
	      </div>
		</div>
	 </el-dialog>
	
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'stu',
  components: {},//声明子组件
  computed:{
	  docsa(){
	  		return function(i){
	  			for(let j=0;j<this.$store.state.suju_box.length;j++){
	  				if(this.$store.state.suju_box[j].value==i){
	  					return this.$store.state.suju_box[j].label;
	  				}
	  			}
	  		}  
	  },
	  activeput(){//联动判断，code 为上一级的code  act为当前未赛选的数据字典
	  	return function(code,act){
	  		let a = [];
	  		for(let i=0;i<act.length;i++){
	  			if(act[i].own_code==code){
	  				a.push(act[i]);
	  			}
	  		}
	  		return a;
	  	}
	  },
	  gitcode(){//通过id获取code
	  	return function(id,act){
	  		for(let i=0;i<act.length;i++){
	  			if(id==act[i].value){
	  				return act[i].code;
	  			    break
	  			}
	  		}
	  	}
	  },
	  isNull(){//判断文本输入框是否为纯空格或者空
	  		return function( str ){
	      if ( str == "" ) return true;
	      var regu = "^[ ]+$";
	      var re = new RegExp(regu);//为空或纯空格为 true    有值为false
	      return re.test(str);
	     }
	  },
  },
  data(){
	  return {
		loading:false,
		btn_shou:false,
		dialogVisible: false,
		activess:{
			group_id:'',//村组ID
			village_id:'',//行政村ID
			pop_id:'',//人口ID
						   work_address:'',//工作地址
						   work_id:'',//务工状态(数据字典type:WORK_S_T)
						   work_lon:'',//经度
						   work_lat:'',//纬度
						   unit_id:'',//单位属性
						   unit_name:'',//单位名称
						   work_type:'',//工种
						   work_wage:'',//务工工资
						   work_year:'',//务工年度
						   is_out:'',//是否外出
						   out_time:'',//外出时间
						   is_stay_county:'',//是否有意愿
						   pos_id:'',//岗位状态(数据字典type:POS_S_T)
						   remark:'',//备注
						   work_start_time:'',//工作起始时间
						   position_status:'',//岗位状态
						   remark_wor:'',//备注
						   work_experience:[],//工作经历集合
		},
		work_experience_c:{
				work_info_id:'',//务工信息ID
				pop_id:'',//人口ID
				unit_name:'',//企业名称
				work_start_time:'',//工作开始时间
				work_end_time:'',//离职时间
				position_status:'',//岗位状态
				remark:'',//备注
		},
		renbox:[],
		num:0,
	  }
  },
  methods:{
	  git_act(i,num){//获取数据的同打开狂口
	      if(num==1){
			  this.activess = i;
			  this.activess.is_out = this.activess.is_out+'';
			  this.activess.is_stay_county = this.activess.is_stay_county+'';
			  this.activess.work_year =  this.activess.work_year+''
			  if(this.activess.work_experience.length!=0){
				  for(let j=0;j<this.activess.work_experience.length;j++){
					  this.activess.work_experience[j].position_status = this.activess.work_experience[j].position_status+'';
				  }
			  }
			  // if(this.activess.work_experience){}else{this.activess.work_experience=[]}
			  console.log(this.activess);
			  this.git_ren();
		  }
		  this.num = num;
	      console.log(this.activess,num);
	      this.dialogVisible=true;
	  },
	  git_acts(){//提交数据
	        console.log(this.activess)
	        if(this.isNull(this.activess.village_id)){this.$message.error('请选择 行政村');return false}
	        if(this.isNull(this.activess.group_id)){this.$message.error('请选择 村组');return false}
			if(this.isNull(this.activess.pop_id)){this.$message.error('请选择 人员');return false}
			if(this.isNull(this.activess.work_id)){this.$message.error('请选择 务工状况');return false}
	  		if(this.isNull(this.activess.work_address)){this.$message.error('请输入 务工地址');return false}
			if(this.isNull(this.activess.unit_id)){this.$message.error('请选择 单位属性');return false}
			
			if(this.activess.work_experience.length!=0){
				for(let i=0;i<this.activess.work_experience.length;i++){
					this.activess.work_experience[i].pop_id = this.activess.pop_id;
				}
			}
	        
	  		 let url = this.num==1?'/dj/user_pc/work_info_modify':'/dj/user_pc/work_info_insert';
	  		 $.ajax({url:url,type:'post',data:this.activess,dataType:'json',success:(res)=> {
	  		 	if(Object.prototype.toString.call(res) != '[object Object]'){res = JSON.parse(res)}
	  		 	 console.log(res,'提交');
	  		 	 if(res.code==200){
	  				this.$parent.git_act();
	  		 		this.$message({message: '操作成功',type: 'success'});
	  		 		this.dialogVisible=false;
	  				this.qin();
	  		 	  }else{
	  		 		 this.$message.error(res.msg);
	  		 	  }
	  		 	}
	  		 })
	  },
	  qin(){//清除
	  	this.activess={
			village_group_id:'',//村组ID
			country_id:'',//行政村ID
			pop_id:'',//人口ID
						   work_address:'',//工作地址
						   work_id:'',//务工状态(数据字典type:WORK_S_T)
						   work_lon:'',//经度
						   work_lat:'',//纬度
						   unit_id:'',//单位属性
						   unit_name:'',//单位名称
						   work_type:'',//工种
						   work_wage:'',//务工工资
						   work_year:'',//务工年度
						   is_out:'',//是否外出
						   out_time:'',//外出时间
						   is_stay_county:'',//是否有意愿
						   pos_id:'',//岗位状态(数据字典type:POS_S_T)
						   remark:'',//备注
						   work_start_time:'',//工作起始时间
						   position_status:'',//岗位状态
						   remark_wor:'',//备注
						   work_experience:[],//工作经历集合
	  		
	  	}
	  },
	  create(){//增加工作经历 空表格
	      this.work_experience_c={
				work_info_id:'',//务工信息ID
				pop_id:'',//人口ID
				unit_name:'',//企业名称
				work_start_time:'',//工作开始时间
				work_end_time:'',//离职时间
				position_status:'',//岗位状态
				remark:'',//备注
		  }
		  this.activess.work_experience.unshift(this.work_experience_c);//在数组前面添加
		  console.log(this.activess.work_experience)
	  },
	  delect(index){//删除工作经历 
		this.$confirm('确定删除这条工作经历吗？','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type: 'warning'
		 }).then(() => {
			 this.activess.work_experience.splice(index,1);
		 }).catch(() => {});  
	  },
	  
	  handleClose(done){//监测用户点击x
	     this.$confirm('确定取消关闭吗？','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type: 'warning'
	     }).then(() => {
	  	   this.dialogVisible = false;
	  	   this.qin();
	  	}).catch(() => {});
	  },
	  git_ren(){
		  $.ajax({url:'/xf/point_pc/get_group_pop',type:'post',data:{group_id:this.activess.group_id},dataType:'json',success:(res)=> {
		  	if(Object.prototype.toString.call(res) != '[object Object]'){res = JSON.parse(res)}
		  	 if(res.code==200){
		  		 this.renbox = res.data;
		  		 console.log(this.renbox,'ren')
		  	 }else{console.log(res);}
		  }})
	  }
  },
  mounted(){
	  // this.git_ren()
  }
}
</script>
<style scoped="scoped">
	
	.pboxc1{
		float:left;
		width:70%;
		height:40px;
		border:1px solid rgba(242,242,242,1);
		font-size:14px;color:#666666;
		/* padding-left:18px; */
		text-align:left;
		/* overflow: hidden; */
		/* text-overflow:ellipsis; */
		/* white-space: nowrap; */
	}
	.tabbox{
		width:100%;
		height:40px;
		line-height: 30px;
		margin-top:23px;
	}
	.tabbox p{
		font-size:14px;
		color:#000000;
		width:19.5%;
		text-align:right;
		margin-right:28px;
		float:left;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-family:Source Han Sans CN;
	}
	.pbox{
		width:10%;
		text-align:right;
		height:26px;
		margin-bottom:20px;
		font-size:18px;
		color:#000101;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-family:Source Han Sans CN;
		font-weight:600;
	}
</style>
